<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="true" clrModalSize="xl" (clrModalOpenChange)="onCancel()">
    <h3 class="modal-title">{{"APP_STATUS_DETAIL"| translate}}</h3>
    <div class="modal-body">
        <span *ngIf="item.conditions&&item.conditions.length === 0">
           {{item.message}}
        </span>
        <ul class="clr-timeline clr-timeline-vertical" *ngIf="item.conditions.length>0">
            <li class="clr-timeline-step" *ngFor="let condition of item.conditions" [ngSwitch]="condition.status">
                <clr-icon shape="success-standard" aria-label="Completed" *ngSwitchCase="'True'"></clr-icon>
                <clr-icon shape="error-standard" aria-label="Error" *ngSwitchCase="'False'"></clr-icon>
                <clr-spinner clrMedium aria-label="In progress"
                             *ngIf="getCurrentCondition()&&condition.name === getCurrentCondition().name">
                    Fetching data
                </clr-spinner>
                <span *ngIf="getCurrentCondition()&&condition.name !== getCurrentCondition().name">
                    <clr-icon shape="circle" aria-label="Not started" *ngSwitchCase="'Unknown'"></clr-icon>
                </span>
                <div class="clr-timeline-step-body">
                    <span class="clr-timeline-step-title">{{condition.name |translate}}</span>
                    {{condition.message}}
                </div>
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary"
                (click)="onOpenLogger()">{{"APP_LOGGING"|translate}}
        </button>
        <button *ngIf="item.phase ==='Failed'" class="btn btn-primary"
                (click)="onInit()">{{"APP_RETRY"|translate}}</button>
    </div>
</clr-modal>
